<template>
  <z-modal
    :width="800"
    v-bind="modalOption"
    :okText="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <z-form-container :disabled="disableSubmit">
        <a-form-model slot="detail" layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
          <a-row>
            <a-col :span="12" >
              <a-form-model-item label="用户账号" prop="username">
                <a-input placeholder="请输入用户账号" :disabled="editType !== 'add'" v-model.trim="form.username"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="用户姓名" prop="nickname">
                <a-input placeholder="请输入用户姓名" v-model.trim="form.nickname" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="联系方式" prop="phone">
                <a-input placeholder="请输入联系方式" v-model.trim="form.phone" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="邮箱" prop="email">
                <a-input placeholder="请输入邮箱" v-model.trim="form.email" />
              </a-form-model-item>
            </a-col>

            <a-col :span="12" >
              <a-form-model-item label="职位" prop="postId">
                <!-- <a-input placeholder="请输入职位" v-model.trim="form.id1" /> -->
                <ZAsyncSelect
                  class="w-full"
                  :disabled="disableSubmit"
                  v-model="form.postId"
                  url="/post/page"
                  placeholder="请选择"
                  :optionKey="{label:'name',value:'id'}"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="兼任">
                <ZAsyncSelect
                  class="w-full"
                  :disabled="disableSubmit"
                  mode="multiple"
                  v-model="form.concurrentPostIds"
                  url="/post/page"
                  placeholder="请选择"
                  :optionKey="{label:'name',value:'id'}"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="级别" prop="rank">
                <z-dict-select-tag v-model="form.rank" :disabled="disableSubmit" placeholder="请选择级别"  dictCode="MB_SYSTEM_RANK"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="第三方账号">
                <a-input placeholder="请输入第三方账号" v-model.trim="form.thirdId" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-model-item
                label="是否可用"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-radio-group v-model="form.accountNonLocked"  button-style="solid">
                  <a-radio-button :value="true">是</a-radio-button>
                  <a-radio-button :value="false">否</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item
                label="是否管理员"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-radio-group v-model="form.administrator"  button-style="solid">
                  <a-radio-button :value="true">是</a-radio-button>
                  <a-radio-button :value="false">否</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" >
              <a-form-model-item label="简介" :label-col="labelCol2" :wrapper-col="wrapperCol2">
                <a-textarea placeholder="请输入简介" v-model.trim="form.introduction" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24" >
              <a-form-model-item label="头像" :label-col="labelCol2" :wrapper-col="wrapperCol2">
                <z-image-upload v-model.trim="form.avatar" :number="1"></z-image-upload>
              </a-form-model-item>
            </a-col>

          </a-row>
        </a-form-model>
      </z-form-container>
    </a-spin>
  </z-modal>
</template>

<script>
import ZImageUpload from '@/components/zz/ZImageUpload'
import ZFormContainer from '@/components/zz/ZFormContainer'
import ModalFormMixin from '@/mixins/ModalFormMixin'
import debounce from 'lodash/debounce'
import { duplicateCheck } from '@/services/common'
import ZAsyncSelect from '@/components/dict/ZAsyncSelect'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
export default {
  name: 'UserModal',
  mixins: [ModalFormMixin],
  components: {
    ZImageUpload,
    ZFormContainer,
    ZAsyncSelect,
    ZDictSelectTag
  },
  data() {
    return {
      validatorRules: {
        username: [
          { required: true, message: '请输入用户账号!', trigger: 'change' },
          { validator: (rule, value, callback) => this.validateUsername(rule, value, callback), trigger: 'change' }
        ],
        nickname: [
          { required: true, message: '请输入姓名' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱格式!' }
        ],
        postId: [
          // { required: true, message: '请选择职位' }
        ],
        rank: [
          // { required: true, message: '请选择级别' }
        ]
      },
      url: {
        add: '/user/add',
        edit: '/user/edit'
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    }
  },
  methods: {
    addAfter() {
      this.$set(this.form, 'administrator', false)
      this.$set(this.form, 'accountNonLocked', true)
    },
    validateUsername: debounce(function(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        duplicateCheck({
          tableName: 'mb_user',
          column: 'username_',
          key: value,
          exclude: this.editType === 'edit' ? value : ''
        }).then(res => {
          if (res.success) {
            res.result === 0 ? callback() : callback('用户账号已存在')
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    }, 400)
  }
}
</script>
